<template>
  <div id="home">
    <Introduce>
      <template v-slot:title>
        随时抵押，随时解押，立即获得奖励。
      </template>
      <template v-slot:msg>
        <p>
          今天是在TRON上挖珍珠的好日子。
        </p>
        <p>
          Pearl.finance的智能合约已通过SlowMist审核。检查审核报告此处。
        </p>
      </template>
      <template v-slot:justSwap>
        <div class="just-swap">
          <a href="#">
            JustSwap PEARL-TRX
          </a>
        </div>
      </template>
    </Introduce>
    <div class="balance-box">
      <Balance :number="0.0" :img-show="true">
        <template v-slot:title>
          <p>
            我的珍珠余额
          </p>
        </template>
      </Balance>
      <Balance :number="-75000">
        <template v-slot:title>
          <p>
            总供应量
          </p>
        </template>
      </Balance>
    </div>
    <div class="statistics-box">
      <Statistics></Statistics>
      <Statistics></Statistics>
      <Statistics></Statistics>
    </div>
  </div>
</template>

<script>
import header from '@/components/header';
import Balance from './Balance';
import Statistics from './Statistics';
import Introduce from '@/components/introduce';
export default {
  components: {
    Header: header,
    Balance,
    Statistics,
    Introduce,
  },
};
</script>

<style lang="scss" scoped>
.clearfix::after {
  content: '';
  height: 0;
  display: block;
  clear: both;
}
#home {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  .introduce-box {
    text-align: center;
    .figure {
      margin-top: 80px;
      height: 125px;
      background: url('../../assets/images/farmer.png') no-repeat center;
    }
    .title {
      font-size: 36px;
      font-weight: 700;
      color: #5b2639;
      margin-bottom: 10px;
    }
    .msg {
      line-height: 0.5;
      font-size: 18px;
      color: #aa8592;
      font-weight: 400;
      padding-top: 10px;
      padding-bottom: 20px;
    }
    .just-swap:hover {
      background: #f7f2f4;
    }
    .just-swap {
      width: 300px;
      height: 56px;
      box-sizing: border-box;
      padding: 0 15px;
      border-radius: 12px;
      background-color: #f0e7ea;
      box-shadow: 4px 4px 8px #e2cfd5, -8px -8px 16px #f7f2f4;
      margin: 0 auto;
      margin-bottom: 40px;
      a {
        width: 100%;
        height: 100%;
        font-size: 16px;
        color: #d1004b;
        font-weight: 700;
        text-align: center;
        line-height: 56px;
      }
    }
  }
  .balance-box {
    display: flex;
    justify-content: center;
    & > div:last-child {
      margin-right: 0;
    }
  }
  .statistics-box {
    padding: 60px 0;
    display: flex;
    justify-content: space-around;
  }
}
</style>
